<template>
  <div>
    <Header>
      <van-icon name="arrow-left" size="22" slot="left" />
      <van-icon name="wap-home-o" size="22" slot="right" />
    </Header>
    <section class="login_section">
      <!-- 1. 手机号 -->
      <van-row>
        <input type="number" v-model="user" placeholder="请输入手机号码">
      </van-row>
      <!-- 2. 图形验证码 -->
      <van-row>
        <input type="number" v-model="figure" placeholder="请输入图形验证码" />
        <span id="v_container"></span>
      </van-row>
      <!-- 3. 短信验证码 -->
      <van-row>
        <input type="number" v-model="meAuthCode" placeholder="请输入短信验证码" />
        <button class="mscode" @click="getMsCode" :class="{ mscode_disabled: isMsCodeShow }">短信验证码</button>
      </van-row>
      <!-- <van-row>
        <van-checkbox v-model="isAutoLogin" checked-color="#ee0a24">自动登录</van-checkbox>
      </van-row> -->
      <van-row>
        <div class="login_btn" @click="login">登录</div>
      </van-row>
      <van-row class="other">
        <span @click="goLoginpwd">密码登录</span>
        <span @click="goRegister">快速注册</span>
      </van-row>
    </section>
  </div>
</template>

<script>
import { GVerify } from '@/utils/verifyCode'
import Header from '@/components/common/Header.vue'
import { Toast } from 'vant'
import { getMyAuthCode } from '@/network/api/meAuthCode'
import { loginMobileRequest } from '@/network/api/user'
import { mapMutations } from 'vuex'
export default {
  name: 'login',
  components: {
    Header
  },
  data() {
    return {
      user: '', // 手机号码
      figure: '', // 用户输入的图形验证码
      meAuthCode: '', // 用户输入的短信验证码
      verifyCode: null, // 正确的图形验证码
      isMsCodeShow: false, // 控制短信验证码的显示
      correctMsCode: '', // 正确的短信验证码
      reg_tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      isAutoLogin: true, // 是否自动登录
      timer: null
    }
  },
  methods: {
    ...mapMutations('user', ['LOGINSUCCESS', 'AUTO_LOGIN']),
    async getMsCode() {
      if (!this.user || !this.reg_tel.test(this.user)) {
        return Toast.fail('请输入正确的手机号码')
      }
      let time = 59
      const res = await getMyAuthCode(this.user)
      if (res.status !== '0') return Toast.fail(res.msg)
      this.correctMsCode = res.correctCode
      Toast.success(res.msg)
      this.timer = setInterval(() => {
        const msCode = document.querySelector('.mscode')
        this.isMsCodeShow = true
        msCode.innerText = `${time}s`
        msCode.disabled = true
        time--
        if (time === -1) {
          this.isMsCodeShow = false
          msCode.innerHTML = '短信验证码'
          msCode.disabled = false
          clearInterval(this.timer)
        }
      }, 1000);
    },
    async login() {
      // 1. 预校验
      if (!this.reg_tel.test(this.user)) return Toast.fail('请输入正确的手机号码')
      if (!this.figure) return Toast.fail('请输入图形验证码')
      if (!this.verifyCode.validate(this.figure)) return Toast.fail('图形验证码输入不正确')
      if (!this.meAuthCode) return Toast.fail('请输入短信验证码')
      // 2. 短信验证码校验
      // if (this.correctMsCode !== this.meAuthCode) return Toast.fail('短信验证码不正确')
      // 3. 发送网络请求
      const res = await loginMobileRequest(this.user)
      // 4. 获得token和登录信息 存入本地存储和vuex
      localStorage.setItem('userToken', JSON.stringify(res.token))
      this.LOGINSUCCESS({
        id: res.id,
        user: res.user
      })
      // 5. 获得购物车数据
      this.$store.dispatch('cart/REQUEST_CART_DATA')
      if (this.isAutoLogin) {
        this.AUTO_LOGIN(this.isAutoLogin)
      } else {
        localStorage.removeItem('autoLogin')
      }
      clearInterval(this.timer)
      Toast.loading({
        message: '正在登录...',
        forbidClick: true,
        loadingType: 'spinner',
        onClose: () => {
          this.$router.replace('/profile')
          Toast.success('登录成功')
        }
      })
    },
    goRegister() {
      this.$router.push('/register')
    },
    goLoginpwd() {
      this.$router.push('/login_pwd')
    }
  },
  mounted() {
    this.verifyCode = new GVerify('v_container')
  },
}
</script>

<style scoped lang="less">
.login_section {
  margin-top: 25px;
  width: 100%;
  height: 350px;

  .van-checkbox {
    margin: 5px 0;
  }

  .van-row {
    display: flex;
    justify-content: center;

    input {
      width: 90%;
      height: 44px;
      border: 1px solid #ddd;
      margin-bottom: 15px;
    }

    .login_btn {
      width: 80%;
      padding: 12px 16px;
      border-radius: 5px;
      background-color: #b0352f;
      color: #fff;
      text-align: center;
      font-size: 14px;
    }
  }

  #v_container {
    height: 48px;
    position: absolute;
    right: 17px;
    border-left: 2px solid #eee;
  }

  .mscode,
  .mscode_disabled {
    box-sizing: border-box;
    width: 120px;
    height: 48px;
    position: absolute;
    right: 17px;
    padding: 5px;
    background-color: #b0352f;
    color: #fff;
    text-align: center;
    font-size: 14px;
    line-height: 38px;
    border-radius: 5px;
    border: none;
  }

  .mscode_disabled {
    background-color: #eee;
    color: #848689;
  }

  .other {
    margin-top: 15px;
    font-size: 14px;

    span:nth-child(1) {
      margin-right: 110px;
    }

    span:nth-child(2) {
      margin-left: 110px;
    }
  }
}
</style>

